<template>
  <div
    v-if="loaded"
    class="home-container"
  >
    <toppanel
      :title="title"
      :titleColor="titleColor"
      bgcolor="transparent"
      use-toggle
      show-title
      @resize="onResize"
    />
    <div
      class="home-header"
      :style="headerStyle"
    >
      <div class="home-header-search">
        <van-search
          :value="keyword"
          placeholder="请输入搜索关键词"
          use-action-slot
          left-icon="/static/icons/search.png"
          @change="onKeywordChange"
          @search="onSearch"
          class="searchbar"
          background="#fff"
          custom-class="home-header-searchbar"
          input-class="home-header-searchbar__field"
        >
          <view
            slot="action"
            @tap="onSearch"
          >搜索</view>
        </van-search>
      </div>

      <van-grid
        :column-num="4"
        :border="false"
        icon-size="44px"
        custom-class="home-header-category"
      >
        <van-grid-item
          v-for="(item,index) in menus"
          :key="index"
          :icon="item.icon"
          :text="item.title"
          link-type="navigateTo"
          :url="item.link"
          content-class="menu-item"
          text-class="menu-item-text"
        />
      </van-grid>
    </div>

    <van-tabs
      sticky
      swipeable
      animated
      :offset-top="navHeadHeight"
      line-width="20px"
      color="#0062F5"
      title-inactive-color="#ccc"
      title-active-color="#000"
      custom-class="navbar"
      nav-class="navbar-nav"
      tab-class="navbar-tab"
      lazy-render
      tab-active-class="navbar-tab-active"
    >
      <van-tab
        v-for="(tab,index) in tabs"
        :key="index"
        :title="tab.title"
        :name="tab.name"
      >
        <recommend
          :url="tab.route"
          key="recommend"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { formatStyles } from '@/utils'
import { homeApi } from '@/api'
import Recommend from '@/components/home/recommend'
import toppanel from '@/components/toppanel'
import Scalebox from '@/components/scalebox'
import SearchBar from '@/components/bar/search'
export default {
  components: {
    Scalebox,
    Recommend,
    toppanel,
    SearchBar
  },
  data () {
    return {
      loaded: false,
      apis: {
        recommend: 'home/recommend'
      },
      title: '',
      username: 'EMHOME',
      countDownTime: 86400 * 1000,
      location: '101120107',
      timeData: {},
      gender: 2,
      avatar: 'http://oss.youmbe.com/attachments/avatar/06.jpg',
      cover: 'http://oss.youmbe.com/assets/bg/stcorhome.png',
      allCategory: {
        id: 0,
        title: '全部分类',
        icon: 'http://oss.youmbe.com/mp/icons/category.png',
        description: '部分满499减100',
        cover: 'http://oss.youmbe.com/mp/cover/footerball.png',
        link: '/pages/category/main'
      },
      menus: [],
      tabs: [
        {
          id: 1,
          title: '为您推荐',
          name: 'recommend',
          route: 'home/recommend'
        },
        {
          id: 2,
          title: '最新需求',
          name: 'newest',
          route: 'home/recommend'
        }
      ],
      titleColor: '#000000',
      navBackgroundColor: '#ff6600',
      keyword: '',
      swipers: [
        {
          title: '',
          description: '',
          thumb: 'http://p3.itc.cn/q_70/images03/20201114/79a3c67d2be0451dab171fd78de90d28.png',
          class: 'demo-text-1'
        }
      ],
      currentTab: 0, // 预设当前项的值
      indicatorDots: true,
      offsetTop: 64,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      navHeadHeight: 64
    }
  },
  computed: {
    headerStyle () {
      let styles = {}
      if (this.navHeadHeight) {
        styles.paddingTop = (this.navHeadHeight + 15) + 'px'
      }
      return formatStyles(styles)
    }
  },
  created () {
    console.log('---------Page index created')
    console.log('device info:', this.$store.state.app.device)
    this.onLoadMessage()
  },
  methods: {
    onKeywordChange (e) {
      this.keyword = e.mp.detail
    },
    onSearch (e) {
      console.log(e)
      console.log(this.keyword)
      let params = {
        keyword: this.keyword,
        category_id: 0
      }
      this.pushNativelink({
        type: 'push',
        route: '/pages/needs/main?' + this.$qs.stringify(params)
      })
    },
    getHomeData () {
      console.log('test onLoadHome')
      homeApi().then(res => {
        console.log(res)
        this.menus = res.categories
        this.title = res.title
        this.tabs = res.tabs
        this.loaded = true
      })
    },
    onLoadMessage () {
      // setTimeout(() => {
      //   wx.setTabBarBadge({
      //     index: 2, text: '2'
      //   })
      // }, 2000)
    },
    onResize (h) {
      console.log(h)
      this.navHeadHeight = h
    },
    onChange (e) {
      this.timeData = e.mp.detail
      console.log(e.mp.detail)
    }
  },
  onShow () {
    console.log('onShow')
    this.getHomeData()
  },

  setLoading () {
    this.setData({
      loading: !this.data.loading
    })
  },

  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '科技特派员',
      path: '/pages/index/main?id=0',
      success: function (res) {
        console.log('成功', res)
      }
    }
  }
}
</script>

<style lang="less">
.pagetabs {
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  &-head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 48px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 2px;
    &-item {
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      position: relative;
      &::after {
        height: 4px;
        border-radius: 4px;
        width: 20px;
        background: transparent;
        margin-left: -10px;
        position: absolute;
        left: 50%;
        bottom: 2px;
        content: '';
        display: block;
      }
      &.active {
        font-size: 20px;
        font-weight: bold;
        &::after {
          background: #4675f9;
        }
      }
    }
  }

  &-content {
    height: 100%;
    box-sizing: border-box;
    &-scroll {
      height: 100%;
    }
  }
}

.navbar {
  .van-tabs__wrap {
    background: #fff;
    padding: 0 15px;
    height: 48px !important;
  }
  &-tab {
    flex: none !important;
    &-active {
      font-weight: bold !important;
    }
  }
}
.menu {
  &-item {
    padding-bottom: 10px !important;
    &-text {
      margin-top: 10px !important;
    }
  }
}
.home {
  &-container {
    width: 100%;
  }
  &-header {
    padding: 80px 15px 15px;
    z-index: 0;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    &::after {
      position: absolute;
      left: -50%;
      top: 0;
      width: 200%;
      height: 300px;
      display: block;
      background: #004bd4 url('http://oss.youmbe.com/assets/bg/stcorhome2.png')
        no-repeat bottom center / auto 100%;
      z-index: -1;
      content: '';
      border-radius: 0 0 50% 50%;
    }
    &-search {
      display: flex;
      align-items: center;
      border-radius: 8px;
      .searchbar {
        flex-grow: 1 !important;
      }
    }
    &-searchbar {
      padding: 0 !important;
      overflow: hidden;
      border-radius: 5px !important;
      &__field {
        height: 30px !important;
      }
      .van-search {
        &__content {
          background: transparent !important;
          padding-right: 5px !important;
          border-radius: 5px !important;
        }
        &__action {
          position: relative;
          padding: 0 10px !important;
          color: #1B75FF;
          &::before {
            position: absolute;
            left: 0;
            top: 30%;
            width: 1px;
            height: 40%;
            background: #DBECFE;
            content: '';
          }
        }
      }
    }
    &-message {
      margin-left: 10px;
    }
    &-category {
      margin-top: 80px;
      padding: 10px 0 5px;
      background: #fff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.06);
    }
    .van-grid {
      border-radius: 8px;
      overflow: hidden;
    }
  }
}
</style>
